<template>
    <div class="categories_container">
      <div class="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--卡片视图区-->
      <el-card>
        <el-row :gutter="0">
          <el-col :span="3"><div class="grid-content bg-purple">
            <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
          </div></el-col>
        </el-row>
        <zk-table :data="cateList" :columns="columns" :selection-type="false" :expand-type="false" show-index
        index-text="#" border>
          <!--是否有效-->
          <template slot="isEnabled" slot-scope="scope">
            <i :class="scope.row.cat_deleted?'el-icon-success':'el-icon-error'" :style="{color:scope.row.cat_deleted?'green':'red',fontSize:'18px'}"></i>
          </template>
          <!--排序-->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level ==0">一级</el-tag>
            <el-tag size="mini" v-else-if="scope.row.cat_level ==1" type="success">二级</el-tag>
            <el-tag size="mini" v-else-if="scope.row.cat_level ==2" type="info">三级</el-tag>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCate(scope.row)">删除</el-button>
          </template>
        </zk-table>
        <!--分页-->
        <el-pagination align="left" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5,10,15,20,30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        <!--添加分类对话框-->
        <el-dialog title="添加分类" align="left" :visible.sync="addCatedialogVisible" width="45%" @close="addCateFormResst">
          <el-form :model="addCateForm" ref="addCateFormRef" :rules="addCateFormRules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
              <!--级联选择 props:配置对象-->
              <el-cascader v-model="addCateForm.cat_pid" :options="parentCateList" :props="cascaderProps"
                clearable></el-cascader>
            </el-form-item>
          </el-form>
          <!--底部区-->
          <span slot="footer" class="dialog-footer">
          <el-button @click="addCatedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategories">确 定</el-button>
        </span>
        </el-dialog>
        <!--编辑分类对话框-->
        <el-dialog title="修改分类" align="left" :visible.sync="editCatedialogVisible" width="45%" @close="addCateFormResst">
          <el-form :model="addCateForm" ref="editCateFormRef" :rules="addCateFormRules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
          </el-form>
          <!--底部区-->
          <span slot="footer" class="dialog-footer">
          <el-button @click="editCatedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCategories">确 定</el-button>
        </span>
        </el-dialog>
      </el-card>
    </div>
</template>

<script>
  import connector from '../../base/interface.js';
    export default {
      data(){
        return{
          /*查询条件*/
          queryInfo:{type:3, pagenum:1, pagesize:5,}, /*商品分类的数据列表*/
          cateList:[],
          /*总书记条数*/
          total:0,
          /*为table指定列的定义表格各列的配置*/
          columns:[
            {label:'分类名称',prop:'cat_name'},
            {label:'是否有效',type:'template',template:'isEnabled'},
            {label:'排序',type:'template',template:'order'},
            {label:'操作',type:'template',template:'operation'}
          ],
          /*添加分类对话框是否显示*/
          addCatedialogVisible:false,
          /*编辑分类是否显示*/
          editCatedialogVisible:false,
          /*添加分类表单*/
          addCateForm:{cat_name:'',cat_pid:0,cat_level:0},
          /*添加分类表单验证规则*/
          addCateFormRules:{
            cat_name:[{required:true,message:'请输入分类名称', trigger: 'blur'}]
          },
          parentCateList:[],
          /*指定级联选择器的配置对象*/
          cascaderProps:{
            label:'cat_name',
            value:'cat_id',
            children:'children',
            expandTrigger:'hover',
            checkStrictly:true,
            emitPath:false
          },
          /*选中得父级分类id数组*/
          selectedKeys:[]
        }
      },
      methods:{
        getCateList(){
          /*获取商品分类数据列表*/
          connector.getCateList(this.queryInfo).then(res=>{
            var {data:data}=res;
            this.cateList=data.data.result;
            this.total=data.data.total;
          });
        },
        showEditDialog(row){
          // 获取分类名称
          connector.getCategoriesById(row.cat_id).then(res=>{
            var {data:data}=res;
            this.addCateForm.cat_name=data.data.cat_name;
            this.addCateForm.cat_pid=data.data.cat_id;
            this.editCatedialogVisible=true;
          });

        },
        editCategories(){
          /*编辑分类*/
          this.$refs.editCateFormRef.validate(vaild=>{
            if(!vaild)return;
            /*发起添加用户请求*/
            /*排除手动清空级联选择时id为null*/
            connector.editCategories(this.addCateForm.cat_pid,this.addCateForm.cat_name).then(res=>{
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              /*重置并关闭*/
              this.editCatedialogVisible=false;
              this.getCateList();
            })
          });
        },
        deleteCate(row){
          /*删除分类*/
          this.$confirm(`此操作将删除${row.cat_name}分类, 是否继续?`, '提示', {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
            connector.deleteCategoriesByid(row.cat_id).then(res=>{
              /*删除成功*/
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              this.getCateList();
            })
          });
        },
        handleSizeChange(newSize){
          /*监听pageSize改变的事件*/
          this.queryInfo.pagesize=newSize;
          /*涮新数据列表*/
          this.getCateList();
        },
        handleCurrentChange(newPage){
          /*页码值改变事件 pagenum*/
          this.queryInfo.pagenum=newPage;
          /*涮新数据列表*/
          this.getCateList();
        },
        showAddCateDialog(){
          /*显示添加分类对话框*/
          this.getParentCateList();
          this.addCatedialogVisible=true;
        },
        getParentCateList(){
          /*获取一级二级的分类数据列表*/
          connector.getCateList({type:'2'}).then(res=>{
            var {data:data}=res;
            this.parentCateList=data.data;
          });
        },
        addCategories(){
          /*添加商品分类*/
          this.$refs.addCateFormRef.validate(vaild=>{
            if(!vaild)return;
            /*发起添加用户请求*/
            /*排除手动清空级联选择时id为null*/
            this.addCateForm.cat_pid=this.addCateForm.cat_pid==null?0:this.addCateForm.cat_pid;
            connector.addCategories(this.addCateForm).then(res=>{
              var {data:data}=res;
              this.$message({message:data.meta.msg,type:'success'});
              /*重置并关闭*/
              this.addCatedialogVisible=false;
              this.getCateList();
            })
          });
        },
        addCateFormResst(){
          /*添加分类的表单重置*/
          this.addCateForm.cat_pid=this.addCateForm.cat_level=0;
          this.addCateForm.cat_name='';
        }
      },
      created() {
        this.getCateList();
      }
    }
</script>

<style lang="scss" scoped>
.categories_container{
  .zk-table{
    margin: 15px 0px;
  }
  .el-cascader{
    width: 100%!important;
  }
}

</style>
